import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// import HomeView from '@/views/HomeView.vue'
// import SearchView from '@/views/SearchView.vue'
// import NotFound from '@/views/NotFound.vue'


const routes = [
  // 查询参数方式传递数据
  // {path: '/home', component: HomeView},
  // {path: '/search', component: SearchView}

  // 动态路由传参
  // 路由重定向
  {path: '/', redirect: '/home'},
  // {path: '/home', component: HomeView},
  // // words 是参数名，任意名称都可
  // // :参数名? 表示当前参数是可选的，不传递同样可以匹配到该页面
  // {path: '/search/:words?', name: 'search', component: SearchView},
  // // 没有匹配到时展示的页面
  // {path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound}

  
  // 路由懒加载
  // 懒加载的路由页面，默认不会下载到用户的浏览器中
  // 访问对应路由的时候才会去加载
  {path: '/home', component: () => import('@/views/HomeView.vue')},
  {path: '/search/:words?', component: () => import('@/views/SearchView.vue')},
  {path: '/my', component: () => import('@/views/MyView.vue')},
  {path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue')}
]

const router = createRouter({
  // hash 模式 url 中有 #
  // history: createWebHashHistory(),

  // history模式没有#，url更为精美（较为常用的模式）
  // 但是需要后端做一些配置，配置参考 Vue Router官网历史记录模式页面
  history: createWebHistory(),
  routes
})

export default router